<template>
	<div class="page">
		<div class="title">登录账号</div>
		<!-- <div class="sub">首次登录会自动创建账号</div> -->
		<div class="form">
			<div class="line b">
				<input
					class="input"
					type="number"
					placeholder="请输入手机号码"
					placeholder-class="holder"
					v-model="telPhoneNumber"
				/>
				<span class="verify-sec" v-if="$store.getters.wait"
					>重新发送({{ $store.getters.wait }}s)</span
				>
				<text class="verify-btn" @click="getVerifyCode" v-else>获取验证码</text>
			</div>
		</div>
		<van-button class="submit" block round @click="login">立即登录</van-button>
	</div>
</template>

<script>
import { sendSmsCode, checkCode } from '@/api'
import { showToast } from 'vant'
const waitDefult = 60000
export default {
	mounted() {},
	watch: {},
	props: {},
	data() {
		return {
			telPhoneNumber: '',
			captchaVal: '',
			captchaUrl: '/api/mobile/login/captcha?random=' + Math.random(),
			smsCode: ''
		}
	},
	computed: {
		// ...mapGetters(['userProfile'])
	},
	methods: {
		async getVerifyCode() {
			try {
				await sendSmsCode(this.telPhoneNumber, this.$route.query.distributorId)
				showToast('短信验证码已发送')
				this.$store.dispatch('startWait')
				this.$router.push({
					path: '/smsCode',
					query: {
						phone: this.telPhoneNumber,
						...this.$route.query
					}
				})
			} catch (e) {
				showToast(e.msg)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
}

.page {
	min-height: 100vh;
	box-sizing: border-box;
	padding: 50px;

	.title {
		font-size: $font_max;
		color: #000;
		margin-bottom: $space_2;
	}

	.sub {
		font-size: $font_medium;
		color: #999;
		font-weight: 600;
	}

	.form {
		border-radius: 8px;
		// background-color: #fff;
		margin-top: 90px;
		margin-inline: 36px;
		font-size: $font_medium;

		.input {
			flex: 1;
		}

		.verify-btn {
			white-space: nowrap;
			color: $color_main;
			font-weight: 600;
			font-size: $font_small;
		}

		.verify-sec {
			white-space: nowrap;
			color: #bbb;
			font-size: $font_medium;
		}
	}

	.captcha-form {
		width: 600px;
		// background-color: #f0f0f5;
		border-radius: 12px;
		padding: $space_3;

		.cpt-tl {
			font-size: $font_medium;
			// font-weight: 600;
			margin-bottom: $space_2;
		}

		.cpt-fm {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			position: relative;
			z-index: 0;

			.img {
				flex: 0 0 200px;
				height: 78px;
				background-size: cover;
				background-position: center center;
				background-repeat: no-repeat;
				position: relative;

				.loading {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: -1;
				}
			}

			.ipt {
				// background: #fff;
				border-radius: 6px;
				margin-inline: $space_2;
				padding-inline: $space_2;
				height: 78px;
			}

			.sbm {
				border-radius: 6px;
				height: 78px;
				flex: 0 0 100px;
				background-color: $color_main;
				color: #fff;
			}
		}
	}

	.line {
		@include flex;
		padding: $space_3;
		background: #fff;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
		border-radius: $border_radius_2;

		// &.b {
		// 	border-bottom: 1px solid #f9f9f9;
		// }
	}

	.submit {
		color: #fff;
		background: linear-gradient(to left, $color_main 60%, $color_main 100%);
		margin: 36px auto;
		width: 300px;
	}
}

input {
	border: none;
	outline: none;
}
</style>
